<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>晒图</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/header.css">
</head>
<body>
   <div id="head">
    <div class="container-fluid">
        <div class="row text-center ">
            <div class="col-lg-7 col-md-10 col-sm-12">
                <div class="row">
                    <div class="col-md-3 col-sm-12 p-0 pt-4" id="logo">
                       <span></a><a href="index.html" target="_parent">植物爱好者交流平台</a></span>
                    </div>
                    <div class="col-md-9 col-sm-12 p-0 pt-4" id="nav">
                        <ul class="nav justify-content-between flex-md-nowrap mr-2">
                            <li class="nav-item"><a href="index.html" class="nav-link" target="_parent">首页</a></li>
                            <li class="nav-item"><a href="list.html" class="nav-link" target="_parent">列表</a></li>
                            <li class="nav-item"><a href="imgs.html" class="nav-link" target="_parent">晒一晒</a></li>
                            <li class="nav-item" v-if="isLogin"><a href="add.html" class="nav-link" target="_parent">写一写</a></li>
                            <li class="nav-item" v-if="isLogin"><a href="suggest.html" class="nav-link" target="_parent">网站建议</a></li>
                            <li class="nav-item" v-if="isLogin"><a href="me.html" class="nav-link" target="_parent">我的文章</a></li>
                            <li class="nav-item" v-if="isLogin"><a href="user.html" class="nav-link" target="_parent">个人中心</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5 col-md-2 col-sm-0 pt-1" id="right">
                <div class="row ml-5">
                    <div class="col-lg-5 col-sm-0 p-0 pt-4">
                       
                            <input type="text" placeholder="在社区内搜索" class="border-0 pl-3 h-100 w-70"  v-model="search"/>
                            <span  class="p-0 border-0 w-100" id="search" ><a :href="`list.html?search=`+search" target="_parent">搜索</a></span>
                       
                    </div>
                    <div class="col-lg-6 col-md-12 col-sm-0 p-0 pt-3" id="login">
                        <div v-if="!isLogin">
                            <a href="login.html" target="_parent"> 登录</a>
                            <span>|</span>
                            <a href="reg.html" target="_parent">注册</a>
                        </div>
                        <div v-else>
                            <img :src="titleImg" class="titleImg"/>
                            {{username}}
                            <span @click="logout" id="logout">退出</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>       
    </div>
   </div>
</body>
<script>
      new Vue({
        el: "#head",
        data: {
            hello:"hello world",// 没有用
            username:"",//用户名
            titleImg:"",//用户头像
            isLogin:false,//是否登录
            search:"",//搜索框内容
        },
        //网页一进来就调用
        created() {
            
            // 存储 session 数据  
            // 获取 session 数据  
            this.username = sessionStorage.getItem('username');
            this.titleImg = sessionStorage.getItem("titleImg");
            if(this.username!=null&&this.username!=""){
                this.isLogin = true
                console.log(this.username); // 输出 "John"
            } 
        },
       
        // 方法全部写在这
        methods: {
            // 退出登录清空session
            logout(){
                sessionStorage.clear()
                this.isLogin = false
            },
            toSearch(){
                // window.location.href = "/html/list.html?search="+
            }
        },
        
    })
</script>
</html>